<template>
  <el-container class="container">
    <div class="search-box">
      <span>已兑现档案表</span>
      <div class="export">
        <el-button @click="exportExcel" type="primary">导出Excel<i class="el-icon-download"></i></el-button>
      </div>

      <div class="search">
        <el-input v-model="search"></el-input>
        <el-button icon="el-icon-search">搜索</el-button>
        <el-select>
          <el-option></el-option>
          <el-option></el-option>
          <el-option></el-option>
        </el-select>
      </div>
    </div>
    <el-table :data="tableData">
      <el-table-column label="标题" prop="title">
      </el-table-column>
      <el-table-column label="处理人" prop="dealPerson"> </el-table-column>
      <el-table-column label="处理公司名称" prop="enterpriseName">
      </el-table-column>
      <el-table-column label="处理时间" prop="dealTime">
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="page">
      <el-pagination background layout="prev, pager, next" :total="1000">
      </el-pagination>
    </div>

    <el-drawer title="详细信息" size="35%" :visible.sync="drawer" :with-header="false">
      <el-form ref="form" v-model="form" label-width="160px">
        <el-form-item label="标题">
          <el-input v-model="form.title"></el-input>
        </el-form-item>
        <el-form-item label="处理人">
          <el-input v-model="form.dealPerson"></el-input>
        </el-form-item>

        <el-form-item label="处理人联系方式">
          <el-input v-model="form.phoneNumber"></el-input>
        </el-form-item>


        <el-form-item label="兑现时间">
          <el-date-picker v-model="form.dealTime"></el-date-picker>
        </el-form-item>

        <el-form-item label="附件">
          <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/"
            :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" multiple :limit="3"
            :on-exceed="handleExceed" :file-list="srcList">
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">立即修改</el-button>
          <el-button @click="cancel">取消</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      search: "",
      drawer: false,
      form: [],
      srcList: [],
      dialogImageUrl: "",
      dialogVisible: false,
    };
  },
  mounted() {
    //TODO:axios发送请求
    let _data = [
      {
        dealPerson: "王小明1",
        phoneNumber: "18779633910",
        title: "工业企业",
        dealTime: "2016-05-04",
        enterpriseName: "xx公司",
        fileId: "3",
      },
      {
        dealPerson: "王小明2",
        phoneNumber: "18779633910",
        title: "工业企业",
        dealTime: "2016-05-04",
        enterpriseName: "xx公司",
        fileId: "2",
      },
      {
        dealPerson: "王小明3",
        phoneNumber: "18779633910",
        title: "工业企业",
        dealTime: "2016-05-04",
        enterpriseName: "xx公司",
        fileId: "4",
      },
      {
        dealPerson: "王小明4",
        phoneNumber: "18779633910",
        title: "工业企业",
        dealTime: "2016-05-04",
        enterpriseName: "xx公司",
        fileId: "5",
      },
    ];
    this.tableData = _data;
    for(let i = 0; i < this.tableData.length; i++){
      this.srcList.push({name: this.tableData[i].fileId, url: "http://ri54fk82c.hd-bkt.clouddn.com/pictures/userId:9_test.jpg"});
    }
  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      //TODO:点击后向后端发送请求，下载此文件
      console.log(file.name)
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },


    //操作栏下属性
    handleEdit(index, row) {
      console.log(index, row);
      this.drawer = true;
      this.form = this.tableData[index];
    },
    handleDelete(index, row) {
      //TODO:传递数据给后端，同时刷新页面
      this.tableData.splice(index, 1);
      // console.log(index, row);
    },
    cancel() {
      this.drawer = false;
    },
    exportExcel() {
      //TODO:导出所有的信息
    }
  },
};
</script>

<style lang="less" scoped>
.container {
  background-color: #ddd;
  padding: 30px;
  display: flex;
  flex-direction: column;

  .page {
    width: 100%;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .search-box {
    width: 100%;
    height: 60px;
    display: flex;
    margin-bottom: auto;
    align-items: center;
  }

  .export {
    margin-left: auto;
    margin-right: auto;
  }

  .search {
    margin-left: auto;
    margin-bottom: auto;
    display: flex;

    .el-button {
      margin-left: 10px;
    }
  }
}
</style>